<template>
  <div class="pbox">
    <Box title="掘进进尺">
      
      <div class="contentBox">
       <div class="bg" v-for="item in sourceData">
        <div class="topText">{{ item.text }}</div>
        <div class="bgContent">
          
          <div class="items">
            <div>计划</div>
            <div>
              <span class="lan">{{ item.plain }}</span
              ><span class="dw">米</span>
            </div>
          </div>
          <div class="items">
            <div>实际</div>
            <div>
              <span class="lv">{{ item.actual }}</span
              ><span class="dw">米</span>
            </div>
          </div>
          <div class="items">
            <div>超欠</div>
            <div>
              <span class="cheng">{{ item.exceed }}</span
              ><span class="dw">米</span>
            </div>
          </div>
          <div class="items">
            <div>进度</div>
            <div>
              <span class="tian">{{ item.progress }}</span
              ><span class="dw">%</span>
            </div>
          </div>
        </div>
        
       </div>
       
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";

import { reactive, onMounted, ref, onUnmounted } from "vue";
import * as echarts from "echarts";

const sourceData = reactive([
  {
    text: "日",
    plain: "2.71",
    actual: "4.07",
    exceed: "1.25",
    progress: "90",
  },
  {
    text: "月",
    plain: "2.71",
    actual: "4.07",
    exceed: "1.25",
    progress: "90",
  },
  {
    text: "年",
    plain: "2.71",
    actual: "4.07",
    exceed: "1.25",
    progress: "90",
  },
]);


</script>
<style scoped>
.pbox {
  width: 100%;
  height: 35%;
  font-family: Arial, Helvetica, sans-serif;
}

.contentBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.bg{
  /* background-image: url("/layout/topContent.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  flex:1;
  height: 100%;
}
.bgContent{
  background-image: url("/layout/topContent.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
  height: 80%;
  gap:10px;

}
.bgContent div{
  font-family: Arial, Helvetica, sans-serif;
}
.topText{
  background-image: url("/layout/topbak.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  margin: 9px 0px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;

}
.items {
  height: 30px;
  display: flex;
  align-items: center;
  background-image: url("/layout/dibu.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  
  padding: 0px 20px;

}
.items>div:nth-child(1){
  width: 40px;
  font-size: 12px;
}
.items>div:nth-child(2){
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.items div{
  font-family: Arial, Helvetica, sans-serif;
}
.lan{
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to bottom, #1e90ff,  #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tian{
  background: linear-gradient(to bottom, #79c4f0,  #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.lv{
  background: linear-gradient(to bottom, #6eed67,  #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.cheng{
  background: linear-gradient(to bottom, #ffcb1e,  #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.dw{
  background: linear-gradient(to bottom, #1e90ff,  #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 5px;
}
</style>
